<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>通知消息</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
    <!-- <link rel="stylesheet" href="../../css/BarlowCondensed-Bold.woff.ttf" /> -->
    <!-- <link rel="stylesheet" href="../../css/sqc.css"> -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{

            outline:none;
        }

    </style>
</head>

<body style="background: #f7f4f2;">
<div id="blank" class="header" v-cloak style="border-bottom:1px solid #f7f4f2;">
    <div v-back.tapmode class="back"></div>
    <div class="title">通知消息</div>
</div>
<div id="app"  v-cloak style="padding-top:60px;">
    <div class="notice-title" style="padding-top: 24px;box-sizing: border-box;">
        <div class="notice-title-item">
            <div class="notice-title-item-img" v-open-win vurl="collection">
                <div style="width: 36px;position: relative">
                    <img style="width: 100%;" v-src="'../../image/heart-slices.png'"/>
                    <span class="notice-pre" v-show="message_list.praise_and_collect_number>0">{{message_list.praise_and_collect_number}}</span>
                </div>
            </div>
            <div class="notice-title-item-img" v-open-win vurl="follow">
                <div style="width: 36px;position: relative">
                    <img style="width: 100%;" v-src="'../../image/zu-haoyou.png'"/>
                    <span class="notice-pre" v-show="message_list.attent_number>0">{{message_list.attent_number}}</span>
                </div>
            </div>
            <div class="notice-title-item-img" v-open-win vurl="comment">
                <div style="width: 36px;position: relative">
                    <img style="width: 100%;" v-src="'../../image/zu-@.png'"/>
                    <span class="notice-pre" v-show="message_list.comment_number>0">{{message_list.comment_number}}</span>
                </div>
            </div>
            <div class="notice-title-item-img" v-open-win vurl="gift">
                <img v-src="'../../image/zu-liwu.png'"/>
            </div>
        </div>
        <div class="notice-title-item" style="margin-top: 20px;">
            <div class="notice-title-item-img">
                赞和收藏
            </div>
            <div class="notice-title-item-img">
                新增关注
            </div>
            <div class="notice-title-item-img">
                评论和@
            </div>
            <div class="notice-title-item-img">
                礼物
            </div>
        </div>
    </div>
    <div class="blacklist-people notice-list" style="background-color: #fff; margin-top: 12px;">
        <div class="gm-message">系统消息</div>
        <ul>
            <li v-for="(list,index) in message_list_con" v-open-win="{id:list.id}" vurl="notice_message">
                <div class="blacklist-head-notice">
                    <img src="../../image/3_bg.png">
                    <span class="blacklist-dian" v-show="list.read_flag == 0"></span>
                </div>
                <div class="blacklist-head-datas">
                    <span class="blacklist-title" style="font-size: 15px;margin-bottom: 2px;">{{list.title}}</span>
                    <div class="blacklist-title"  style="font-size: 12px;color: #999;overflow: hidden;white-space: nowrap;text-overflow: ellipsis">{{list.content}}</div>
                    <div class="recovery-time">
                        {{list.create_time| time}}
                    </div>
                </div>
            </li>
        </ul>

    </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>

<script>
    var vm,
        wx,
        message_list,
        message_list_con,
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        })
        wx = api.require('wx');
        var data = {
            member_id:getPrefs('member_id'),
            page_no:1,
            page_size:20,
        };
        var callback = function (ret) {
            message_list = ret.content;
            message_list_con = ret.content.system_list;
            console.log(JSON.stringify(message_list))
            initApp();
        };
        pinet.post(APIURL+'/app/Notices/systemNews', data, callback);
        api.parseTapmode();
        addListeners();
    };

    function initApp() {
        // var isBigImg = Vue.BSImg == 'big';
        vm = new Vue({
            el: '#app',
            data: {
                message_list:message_list,
                message_list_con:message_list_con,
            },
            computed: {

            },
            methods: {
                reload:function () {
                    var data = {
                        member_id:getPrefs('member_id'),
                        page_no:1,
                        page_size:20,
                    };
                    var callback = function (ret) {
                        vm.message_list = ret.content;
                        vm.message_list_con = ret.content.system_list;
                    };
                    pinet.post(APIURL+'/app/Notices/systemNews', data, callback);
                }
            },
            watch: {

            },
        })
    }

    function addListeners() {

        api.addEventListener({
            name: 'viewappear'
        }, function () {
            vm.reload();
        });
        api.addEventListener({
            name: 'keyback'
        }, function () {
            console.log('ddddd');
            api.closeWin();
        });
        api.addEventListener({
            name: 'reload'
        }, function () {
            window.location.reload();
        });
    }


</script>

</html>
